<template>
	<!-- #ifdef MP-WEIXIN||MP-ALIPAY -->
	<load-image :src="src" :host="mpAppStaticPath" :mode="mode" :size="size" :lazyLoad="lazyLoad"
		@click="handleClick"></load-image>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
	<image :src="url" :mode="mode" :lazyLoad="lazyLoad" @tap="handleClick" :style="[baseStyle]"></image>
	<!-- #endif -->
</template>

<script lang="ts">
	/**
	 * 
	 * @property {String}			src					图片地址
	 * @property {String}			mode				裁剪模式，见官网说明 （默认 'aspectFill' ）
	 * @value aspectFit
	 * @value aspectFill
	 * @value widthFix
	 * @value heightFix
	 * @value top
	 * @value bottom
	 * @value right
	 * @value left
	 * @value center
	 * @value top left
	 * @value top right
	 * @value bottom left
	 * @value bottom right
	 * @property {Boolean}						lazyLoad			图片懒加载,默认开启，仅微信小程序、百度小程序、字节跳动小程序、飞书小程序有效，
	 * @property {String|Array<String>}			size				图片大小，只传一位代表宽高一致
	 * 
	 * @event {Function} click			点击事件
	 * @example <app-image :size="['100rpx']" src="xxx"></app-image>
	 */
	import { defineComponent } from 'vue';
	export default defineComponent({
		name: 'app-image',
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	})
</script>
<script lang="ts" setup>
	import {
		computed
	} from 'vue'
	// #ifdef MP-WEIXIN
	import {
		mpAppStaticPath
	} from '@/common/init/mpApp'
	// #endif
	// #ifdef MP-ALIPAY
	import {mpAppStaticPath} from '@/common/init/aliApp'
	// #endif
	import {
		isString
	} from "@/common/utils";

	const props = withDefaults(defineProps < {
		src: string
		size: string|string[]
		mode?: string
		lazyLoad?: boolean,
	} > (), {
		lazyLoad: true,
		size: () => ['320px', '240px'],
	})
	const emit = defineEmits({
		click: () => true,
	})
	
	const url = computed(() => {
		// #ifdef H5
		return `/static/h5/${props.src}`
		// #endif
		// #ifdef APP
		return `/static/app/${props.src}`
		// #endif
	})

	const baseStyle = computed(() => {
		let style: Record < string, string | number > = {}
		const size = isString(props.size) ? [props.size]: props.size
		style.width =size[0]
		style.height =size[1] ||size[0]
		return style
	})

	const handleClick = (e: any) => {
		emit('click', e)
	}
</script>

<style>

</style>
